<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">商品名称</span>
          <el-input placeholder="请输入名称" v-model="param.tbSpu.title"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          <el-button
            type="primary"
            @click="hadleAddProduct"
            v-if="isPermissionsBtn('store_add')"
            icon="el-icon-circle-plus-outline"
          >新增商品</el-button>
          <el-button
            type="primary"
            @click="uploadClick"
            icon="el-icon-circle-plus-outline"
            v-if="isPermissionsBtn('allstore_download')"
          >下载商盟商品</el-button>
        </div>
      </el-col>
    </el-row>
    <el-container>
      <el-tabs v-model="param.tbSpu.saleable" @tab-click="clicktab">
        <el-tab-pane label="上架商品" name="1"></el-tab-pane>
        <el-tab-pane label="下架商品" name="0"></el-tab-pane>
        <el-tab-pane label="商盟商品" name="3"></el-tab-pane>
        <div class="table-body">
          <el-table :data="tableData" v-loading="isLoading" style="width: 100%">
            <el-table-column prop="title" label="商品名称"></el-table-column>
            <el-table-column prop="num" label="子类目数量"></el-table-column>
            <el-table-column prop="stock" label="库存"></el-table-column>
            <el-table-column
              prop="saleable"
              label="商品状态"
              v-if="param.tbSpu.saleable != 3"
              :formatter="(row) => { return row.saleable == 1 ? '上架' : '下架' }"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="350">
              <template slot-scope="scope">
                <el-button
                  @click="handleEditClick(scope.row)"
                  v-if="param.tbSpu.saleable == 0 && isPermissionsBtn('store_top')"
                  size="small"
                >上架</el-button>
                <el-button
                  @click="handleEditClick(scope.row)"
                  v-if="param.tbSpu.saleable == 1 && isPermissionsBtn('store_down')"
                  size="small"
                >下架</el-button>
                <el-button @click="handleToDetail(scope.row)" type="primary" size="small">详情</el-button>
                <el-button
                  @click="handleToSet(scope.row)"
                  type="success"
                  size="small"
                  v-if="param.tbSpu.saleable == 1 && isPermissionsBtn('store_delegete_setting')"
                >代理设置</el-button>
                <el-button
                  @click="handleToAllGoods(scope.row)"
                  type="primary"
                  size="small"
                  v-if="param.tbSpu.saleable == 1&&scope.row.isUpload==0&& isPermissionsBtn('allstore_upload')"
                >上传到商盟</el-button>
                <el-button
                  @click="handleToAllGoods(scope.row)"
                  type="primary"
                  size="small"
                  v-if="param.tbSpu.saleable == 1&&scope.row.isUpload==1&& isPermissionsBtn('allstore_canceldownload')"
                >取消商盟</el-button>
                <el-popconfirm title="确定删除此商品？" @onConfirm="handleClickDelete(scope.row)">
                  <el-button
                    style="margin-left:15px"
                    size="small"
                    type="danger"
                    slot="reference"
                    v-if="param.tbSpu.saleable == 3&& isPermissionsBtn('allstore_del')"
                  >删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-size.sync="param.queryRequest.pageSize"
              :current-page.sync="param.queryRequest.pageNum"
              :total="totalCount"
            ></el-pagination>
          </div>
        </div>
      </el-tabs>
    </el-container>
    <el-dialog title :visible.sync="isVisible1" width="35%" @close="closeFun('formRef1')">
      <el-form :model="form1" :rules="rules1" ref="formRef1" v-if="isVisible1">
        <el-form-item label="商盟一级分类" prop="AllianceFirst1" :label-width="formLabelWidth">
          <el-select v-model="form1.AllianceFirst1" placeholder="请选择" @change="fristAllGoodClick1">
            <el-option
              v-for="item in FirstOptions1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商盟二级分类" prop="AllianceSecond1" :label-width="formLabelWidth">
          <el-select v-model="form1.AllianceSecond1" placeholder="请选择">
            <el-option
              v-for="item in SecondOptions1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button plain @click="resetForm1('formRef1')">取消</el-button>
          <el-button type="primary" @click="submitForm1('formRef1')">上传</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title :visible.sync="isVisible" width="35%" @close="closeFun('formRef')">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="商盟一级分类" prop="AllianceFirst" :label-width="formLabelWidth">
          <el-select v-model="form.AllianceFirst" placeholder="请选择" @change="fristAllGoodClick">
            <el-option
              v-for="item in FirstOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商盟二级分类" prop="AllianceSecond" :label-width="formLabelWidth">
          <el-select v-model="form.AllianceSecond" placeholder="请选择" @change="secondAllGoodClick">
            <el-option
              v-for="item in SecondOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商盟商品" prop="AllianceGoods" :label-width="formLabelWidth">
          <el-select v-model="form.AllianceGoods" placeholder="请选择">
            <el-option
              v-for="item in GoodsOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加到商城一级分类" prop="GoodsFirst" :label-width="formLabelWidth">
          <el-select v-model="form.GoodsFirst" placeholder="请选择" @change="fristGoodClick">
            <el-option
              v-for="item in GoodsFirstOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加到商城二级分类" prop="GoodsSecond" :label-width="formLabelWidth">
          <el-select v-model="form.GoodsSecond" placeholder="请选择">
            <el-option
              v-for="item in GoodsSecondOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button plain @click="resetForm('formRef')">取消</el-button>
          <el-button type="primary" @click="submitForm('formRef')">下载</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isVisible1: false,
      formLabelWidth: "150px",
      FirstOptions: [],
      SecondOptions: [],
      GoodsOptions: [],
      GoodsFirstOptions: [],
      GoodsSecondOptions: [],
      form: {
        AllianceFirst: "",
        AllianceSecond: "",
        AllianceGoods: "",
        GoodsFirst: "",
        GoodsSecond: ""
      },
      rules: {
        AllianceFirst: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        AllianceSecond: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        AllianceGoods: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        GoodsFirst: [{ required: true, message: "请选择", trigger: "change" }],
        GoodsSecond: [{ required: true, message: "请选择", trigger: "change" }]
      },
      form1: {
        AllianceFirst1: "",
        AllianceSecond1: ""
      },
      rules1: {
        AllianceFirst1: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        AllianceSecond1: [
          { required: true, message: "请选择", trigger: "change" }
        ]
      },
      FirstOptions1: [],
      SecondOptions1: [],
      isVisible: false,
      isLoading: true,
      param: {
        tbSpu: {
          saleable: "1", // 0 下架，1 上架
          productType: "0",
          title: ""
        },
        queryRequest: {
          pageSiz: 10,
          pageNum: 1
        }
      },
      totalCount: 0,
      tableData: [],
      selectRowId: ""
    };
  },
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  mounted() {
    this.initData();
    this.firstAllGoods();
    this.goodFirst();
  },
  methods: {
    resetSearchCotnet() {
      //重置搜索条件
      this.param.tbSpu.title = "";
    },
    search(){
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    closeFun(FormName) {
      //重置form表单
      this.$refs[FormName].resetFields();
      //通过v-if重置自定义组件
    },
    handleToAllGoods(e) {
      this.selectRowId = e.id;
      if (e.isUpload == "0") {
        this.isVisible1 = true;
      } else {
        this.cancelUpdown();
      }
    },
    fristAllGoodClick1(e) {
      this.secondAllGoods(e);
      this.form1.AllianceSecond1 = "";
    },
    fristAllGoodClick(e) {
      this.secondAllGoods(e);
      this.form.AllianceSecond = "";
      this.form.AllianceGoods = "";
    },
    secondAllGoodClick(e) {
      this.AllGoods(e);
      this.form.AllianceGoods = "";
    },
    firstAllGoods() {
      this.$service.tbSpuCategoryList().then(res => {
        if (res.code == "00000") {
          this.FirstOptions = res.data;
          this.FirstOptions1 = res.data;
        }
      });
    },
    secondAllGoods(e) {
      this.$service.tbSpuCategoryListScond(e).then(res => {
        if (res.code == "00000") {
          this.SecondOptions = res.data;
          this.SecondOptions1 = res.data;
        }
      });
    },
    AllGoods(e) {
      this.$service.tbSpuGetGoodsList(e).then(res => {
        if (res.code == "00000") {
          this.GoodsOptions = res.data;
        }
      });
    },
    fristGoodClick(val) {
      this.form.GoodsSecond = "";
      this.goodSecond(val);
    },
    goodFirst() {
      this.$service.firstGood().then(res => {
        if (res.code == "00000") {
          this.GoodsFirstOptions = res.data || [];
        }
      });
    },
    goodSecond(cid) {
      this.$service.secondGood(cid).then(res => {
        if (res.code == "00000") {
          this.GoodsSecondOptions = res.data || [];
        }
      });
    },
    handleClickDelete(scope) {
      this.$service.tbSpuDelect(scope.id).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.initData();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    resetForm(formName) {
      this.isVisible = false;
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        let message = this.form;
        if (valid) {
          let param = {
            id: this.form.AllianceGoods,
            url: this.GoodsOptions[0].url,
            cid1: this.form.GoodsFirst,
            cid2: this.form.GoodsSecond
          };
          this.$service.tbSpuAddGoods(param).then(res => {
            if (res.code == "00000") {
              this.$message({
                message: "下载成功",
                type: "success"
              });
              this.isVisible = false;
              this.$refs[formName].resetFields();
              this.initData();
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },
    resetForm1(formName) {
      this.isVisible1 = false;
      this.$refs[formName].resetFields();
    },
    submitForm1(formName) {
      this.$refs[formName].validate(valid => {
        let message = this.form1;
        var param = {
          id: this.selectRowId,
          cid1: message.AllianceFirst1,
          cid2: message.AllianceSecond1
        };
        if (valid) {
          this.$service.tbSpuUploadGoods(param).then(res => {
            if (res.code == "00000") {
              this.$message({
                message: "上传成功",
                type: "success"
              });
              this.isVisible1 = false;
              this.$refs[formName].resetFields();
              this.initData();
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },
    cancelUpdown() {
      this.$service.tbSpuSoldOut(this.selectRowId).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "取消成功",
            type: "success"
          });
          this.initData();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },

    uploadClick() {
      this.isVisible = true;
    },
    clicktab() {
      console.log(this.param.tbSpu.saleable);
      if (
        this.param.tbSpu.saleable == "0" ||
        this.param.tbSpu.saleable == "1"
      ) {
        this.param.tbSpu.productType = "0";
      } else {
        this.param.tbSpu.productType = "1";
      }
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    initData() {
      this.isLoading = true;
      this.$service.getGoodsList(this.param).then(res => {
        this.isLoading = false;
        if (res.code == "00000") {
          if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
          this.tableData = res.data.rows || [];
          this.totalCount = res.data.total || 0;
        }
      });
    },
    hadleAddProduct() {
      this.$router.push({ path: "/goodsAdd" });
    },
    handleEditClick(row) {
      //console.log(row);
      let param = {
        id: row.id,
        saleable: row.saleable == 1 ? 0 : 1
      };
      this.$service.updateSaleable(param).then(res => {
        if (res.code == "00000") {
          this.initData();
        }else{
          this.$message({
                message: res.message,
                type: "warning"
              });
        }
      });
    },
    handleToDetail(row) {
      if (this.param.tbSpu.saleable == 3) {
        const { href } = this.$router.resolve({
          name: "AllianceGoodAdd",
          query: { id: row.id }
        });
        window.open(href, "_blank");
      } else {
        const { href } = this.$router.resolve({
          name: "GoodsAdd",
          query: { id: row.id }
        });
        window.open(href, "_blank");
      }

      //this.$router.push({ path: "/goodsAdd", query: { id: row.id } });
    },
    handleToSet(row) {
      this.$router.push({ path: "/goodDelegete", query: { id: row.id } });
    },
    handleCurrentChange(pageNum) {
      this.param.queryRequest.pageNum = pageNum;
      this.initData();
    }
  }
};
</script>

<style lang="scss">
.el-container,
.el-tabs {
  width: 100%;
  height: 100%;
}
</style>